<?php include("includes/session.php"); ?>
<?php include("includes/connect_db.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<style>
	#text-nama, #text-nama:focus{
		border: none;
		box-shadow: none;
		margin-top: 5px;
	}
	input, select, option{
		font-family: 'SEGOE UI';
	}
	.pos2{
		padding: 5px 15px;
		background-color: #0088cc; 
		color: #FFF;
		margin-left: 5px;
		float: left;
		vertical-align: center;
		border-radius: 5px;
	}
	.isi_pesan{
		width: 99%; 
		height: 200px; 
		overflow: hidden; 
		word-wrap: break-word; 
		resize: none;
	}
	.filterAll{
		padding: 5px;
		color: #FFF;
		cursor: pointer;
	}
	.separator{
		width: 100%;
		border: 2px solid #08c;
		margin: 10px 0px;
	}
	.btnFilterMahasiswa:hover{
		background: #08a; 
		color: #FFF;
	}
	.btnFilterMahasiswa{
		background: #08c; 
		color: #FFF;
		text-decoration: none;
		width: 100%; 
		border-radius: 0px;
		text-shadow: none;
	}
	.btnFilterPegawai:hover{
		background: #08a; 
		color: #FFF;
	}
	.btnFilterPegawai{
		background: #08c; 
		color: #FFF;
		text-decoration: none;
		width: 100%; 
		border-radius: 0px;
		text-shadow: none;
	}
	.view{
		background: #5bb75b;
		color: #FFF;
		text-decoration: none;
		width: 100%; 
		border-radius: 0px;
		text-shadow: none;
	}
	.view:hover{
		background: #5bb75b;
		color: #FFF;
		text-decoration: none;
		width: 100%; 
		border-radius: 0px;
	}
	.row-fluid{ min-height: 10px; }
	.close{ color: #FFF; }
	.kotakFilter{ border: 1px solid #08c; }
	.filterAll:hover{ background: #08c; }
	.isiFilter{ padding: 5px; }
	.filter{ width: 100px; }
	.lanjut .btn{ min-width: 100px; }
	.btnFilter{ background-color: #08c; }
	.selectFilterMahasiswa{ width: 100%; }
	.selectFilterPegawai{ width: 100%; }
</style>

<div class="span9">  
    <h3>SMS</h3>                      
    <ul class="breadcrumb well">
        <li class="active">Broadcast</li>                
    </ul>    
    <h4>Buat Pesan Baru</h4>
    <div style="width: 100%">
		<div class="row-fluid">
			<div class="span6 kotakFilter">
				<div class="filterAll btnFilter">
					<span class="checkFilter">
						<input type="checkbox" value="mahasiswa" class="checkReal" style="display: none;">
	                    <i class="icon-check check icon-white" style="opacity: 0.4"></i>
					</span>
					<span style="margin-left: 10px;">
						Mahasiswa
					</span>
					<input type="hidden" value="0" class="cek">
				</div>
				<div class="isiFilter" style="display:none">
					<div class="isiFilterMahasiswa">
						<div>
							<div class="separator"></div>
							<select class="selectFilterMahasiswa">
								<option value="*">----------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pilih Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------------</option>
								<option value="status">Status</option>
								<option value="angkatan">Angkatan</option>
								<option value="mataKuliah">Mata Kuliah</option>
								<option value="pa">P.A.</option>
								<option value="agama">Agama</option>
							</select>
						</div>
					</div>
					<button class="btn btnFilterMahasiswa">
						<i class="icon-white icon-plus"></i>
						Tambah Filter
					</button>
					<button class="btn view" style="display: none">
						<i class="icon-white icon-list"></i>
						Lihat Penerima
					</button>
					<input type="hidden" value="1" class="cekFil">
				</div>
			</div>



			<div class="span6 kotakFilter">
				<div class="filterAll btnFilter">
					<span class="checkFilter">
						<input type="checkbox" value="pegawai" class="checkReal" style="display: none;">
	                    <i class="icon-check check icon-white" style="opacity: 0.4"></i>
					</span>
					<span style="margin-left: 10px;">
						Pegawai
					</span>
					<input type="hidden" value="0" class="cek">
				</div>
				<div class="isiFilter" style="display:none">
					<div class="isiFilterPegawai">
						<div>
							<div class="separator"></div>
							<select class="selectFilterPegawai">
								<option value="*">----------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pilih Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------------</option>
								<option value="entitas">Entitas</option>
								<option value="status">Status</option>
								<option value="agama">Agama</option>
							</select>
						</div>
					</div>
					<button class="btn btn-info btnFilterPegawai">
						<i class="icon-white icon-plus"></i>
						Tambah Filter
					</button>
					<button class="btn view" style="display: none">
						<i class="icon-white icon-list"></i>
						Lihat Penerima
					</button>
					<input type="hidden" value="1" class="cekFil">
				</div>
				</div>
			</div>
		</div>

		<div><b>Pesan</b></div>
		<div class="control-group">
			<textarea name="pesan" class="isi_pesan"><?php echo $pesan ?></textarea>
		</div>
		<div class="control-group lanjut">
			<div class="controls">
				<button class="btn btn-info" id="kirim">
					<i class="icon-white icon-ok"></i>
					Kirim
				</button>
				<button class="btn" id="simpan">
					<i class="icon-download-alt"></i>
					Simpan
				</button>
				<button class="btn btn-danger" id="batal">
					<i class="icon-white icon-remove"></i>
					Batal
				</button>
			</div>
		</div>
	</div>
</div><!--/span-->

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
	var penerimaTemp = [];	
	var penerima = [];
	var temp = '';

    $(document).ready(function() {
    	$('.btnFilter').live('click', function(){
    		if ($(this).find('.checkReal').is(':checked')) {
    			
    		} else{
	    		if ($(this).find('.cek').val() == 0) {
	    			$(this).parent('div').find('.isiFilter').slideDown();
	    			$(this).find('.cek').val('1');
	    		} else{
	    			$(this).parent('div').find('.isiFilter').slideUp();
	    			$(this).find('.cek').val('0');
	    		}
	    	}
			return false;
    	});

    	$('.check').live('click', function(){
    		if($(this).parent('span').find('.checkReal').is(':checked')){
    			$(this).parent('span').find('.checkReal').removeAttr('checked');
				$(this).css('opacity', '0.4');
    		} else {
				$(this).parent('span').find('.checkReal').attr('checked', 'checked');
    			$(this).css('opacity', '1');
    			$(this).parent('span').parent('div').parent('div').find('.isiFilter').slideUp();
    			return false;
    		}
    	});

    	$('#kirim').click(function(){
    		if ($('.isi_pesan').val() == "") {
    			alert("isi Pesan Terlebih Dahulu");
    			window.location = "broadcast.php";
    		} else {
    			alert("Pesan Telah Berhasil Dikirim");
    			window.location = "broadcast.php";
    		};
    	});

    	$('#simpan').click(function(){
    		alert("Pesan Telah Disimpan");
    		window.location = "broadcast.php";
    	});

    	$('.selectFilterMahasiswa').live('change', function(){
    		if ($(this).val() != "*") {
				$(this).closest('.isiFilter').find('.cekFil').val("0");
				$(this).closest('.isiFilter').find('.view').css("display", "block");
    			$(this).closest('div').remove();
    			$.ajax({
    			  url: 'act_broadcast.php?aksi=1',
    			  type: 'POST',
    			  data: {filter: $(this).val()},
    			  success: function(data, textStatus, xhr) {
    			    $('.isiFilterMahasiswa').append(data);
    			    return false;
    			  }
    			});

    		};
    	});

    	$('.btnFilterMahasiswa').click(function(){
    		console.log($(this).closest('.isiFilter').find('.cekFil').val());
    		if ($(this).closest('.isiFilter').find('.cekFil').val() == "1") {
    		} else {
	    		$('.isiFilterMahasiswa').append(
	    			"<div>"+
	    				"<div class='separator'></div>"+
						"<select class='selectFilterMahasiswa'>"+
							"<option value='*'>----------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pilih Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------------</option>"+
							"<option value='status'>Status</option>"+
							"<option value='angkatan'>Angkatan</option>"+
							"<option value='mataKuliah'>Mata Kuliah</option>"+
							"<option value='pa'>P.A.</option>"+
							"<option value='agama'>Agama</option>"+
						"</select>"+
					"</div>"
				);
	    		$(this).closest('.isiFilter').find('.cekFil').val("1");
    		};
    	});

    	$('.selectFilterPegawai').live('change', function(){
    		if ($(this).val() != "*") {
    			$(this).closest('.isiFilter').find('.cekFil').val("0");
    			$(this).closest('.isiFilter').find('.view').css("display", "block");
    			$(this).closest('div').remove();
    			$.ajax({
    			  url: 'act_broadcast.php?aksi=2',
    			  type: 'POST',
    			  data: {filter: $(this).val()},
    			  success: function(data, textStatus, xhr) {
    			    $('.isiFilterPegawai').append(data);
    			    return false;
    			  }
    			});

    		};
    	});

    	$('.btnFilterPegawai').click(function(){
    		console.log($(this).closest('.isiFilter').find('.cekFil').val());
    		if ($(this).closest('.isiFilter').find('.cekFil').val() == "1") {
    		} else {
	    		$('.isiFilterPegawai').append(
	    			"<div>"+
	    				"<div class='separator'></div>"+
						"<select class='selectFilterPegawai'>"+
							"<option value='*'>----------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pilih Filter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------------</option>"+
							"<option value='entitas'>Entitas</option>"+
							"<option value='status'>Status</option>"+
							"<option value='agama'>Agama</option>"+
						"</select>"+
					"</div>"
				);
				$(this).closest('.isiFilter').find('.cekFil').val("1");
    		};
    	});

    	$('.removeFilter').live('click', function(){
    		var temp = $(this).closest('.isiFilter');
    		$(this).closest('.filterPlacer').remove();
    		console.log(temp.find('.filter').length);
    		if (temp.find('.filter').length == 0) {
    			temp.find('.view').css("display", "none");
    		};
    	});

    	$('.view').live("click", function(){
			penerima.length = 0;
    		$(this).closest('.isiFilter').find('.filterPlacer').each(function(){
				penerimaTemp = [];
    			penerimaTemp.push($(this).find(".namaFilter").val());
    			penerimaTemp.push($(this).find(".filter").val());
    			penerima.push(penerimaTemp);
    		});
    		var tipe = "";
    		if ($(this).closest(".isiFilter").find(".isiFilterMahasiswa").length > 0) {
    			tipe = "mahasiswa"
    		} else {
    			tipe = "dosen"
    		};


    		var formView = {
				tipe: tipe,
				penerima: penerima,
				temp: "view"
			};
            $.ajax({ 
                type: "POST",
                url: "broadcast-modal.php",
				data: formView,
                cache: false, 
                success: function(msg){ 
                    $("#tampil-modal").html(msg);
                    $("#tampil-modal").fadeIn("medium");
                } 
            }); 
    	});
    });
</script>